<template>
  <div>
    <!--
      1. action: 必选参数，上传图片的接口地址(不用, 后边用自己的)
      2. list-type: 文件列表的类型 (照片墙形式)
      3. file-list: 上传的文件列表, [{url: ''}, {url: ''}, ...]
      4. on-preview:
         配置了该属性, 就会在鼠标移动到图片上时, 展示放大的图标
         点击放大的图标, 就能去调用后边函数的执行, 并且把文件对象传递下去
      5. limit:
         限制上传组件上传图片的个数
         - 缺陷:
           图片已经上传满了, 不会给用户提示,
           也不会隐藏上传按钮
      6. on-remove: 当我们点击了垃圾篓, 就会触发后边函数的执行
      7. http-request: 覆盖默认的上传行为，可以自定义上传的实现
      8. on-change
         文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
         接收的是一个函数 function(file, fileList)
      9. before-upload
         图片文件在真正上传之前触发, 接收的是一个函数   function(file)
         一般用于校验图片的格式或者图片的大小...
     -->
    <el-upload
      :class="{disabled: isDisabled}"
      action=""
      list-type="picture-card"
      :file-list="fileList"
      :limit="limit"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :http-request="handleUpload"
      :on-change="handleChange"
      :before-upload="handleBeforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 预览图片对话框 -->
    <el-dialog title="预览大图" :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
const cos = new COS({
  SecretId: 'AKIDgCTVIq9C0YqtgEWZNvEI6ex0oMfiV2JO',
  SecretKey: 'tZ0C9qIUQ7ZlhOp0wc2D8nDNIxNXYP3S'
})

export default {
  name: 'UploadImage',
  props: {
    // 1. 外部告知能展示几张图片
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      // 1. 预览图片的对象数组
      fileList: [
        { url: 'https://img1.baidu.com/it/u=4216761644,15569246&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500' },
        { url: 'https://img0.baidu.com/it/u=18497219,172601761&fm=253&fmt=auto&app=138&f=PNG?w=519&h=500' }
      ],
      // 2. 预览图片的地址
      dialogImageUrl: '',
      // 3. 显示/隐藏对话框
      dialogVisible: false
    }
  },
  computed: {
    // 1. 动态控制上传按钮的显示和隐藏
    isDisabled() {
      // 如果文件列表的个数 >= 外部传入的限制个数, 就应该隐藏
      return this.fileList.length >= this.limit
    }
  },
  methods: {
    // 1. 点击预览图片
    handlePictureCardPreview(file) {
      // console.log(file)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 2. 点击垃圾篓删除
    handleRemove(file, fileList) {
      // console.log(file, fileList)
      // 不建议直接赋值
      // this.fileList = fileList

      // 方式一: 直接复制数组中的对象
      // this.fileList = [...fileList]

      // 方式二: 直接从原数组中去过滤(推荐)
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
    },
    // 3. 自定义上传
    handleUpload(obj) {
      // console.log(`101-hrsass-${+new Date()}-${obj.file.name}`)
      // console.log(`101-hrsass-${parseInt(Math.random() * 99999)}-${obj.file.name}`)
      // 3.1 调用腾讯云的接口函数实现文件上传
      cos.putObject({
        Bucket: '101-hrsass-1312445828', /* 必须 */
        Region: 'ap-shanghai', /* 存储桶所在地域，必须字段 */
        Key: `101-hrsass-${+new Date()}-${obj.file.name}`, /* 必须, 上传文件的名称 */
        StorageClass: 'STANDARD',
        Body: obj.file // 上传文件对象
      }, function(err, data) {
        console.log(err || data)
      })
    },
    // 4. 当本地上传文件时(同步数组数据)
    handleChange(file, fileList) {
      // console.log(file)
      // console.log(fileList)
      // 同步最新的文件数组给组件中的文件数组
      this.fileList = [...fileList]
    },
    // 5. 上传前文件的格式和大小校验
    handleBeforeUpload(file) {
      // console.log('上传前', file)

      // 5.1 限制上传图片文件的大小为2MB以内
      const isLt2M = file.size / 1024 / 1024 <= 2

      // 5.2 处理并返回结果
      if (!isLt2M) {
        this.$message.warning('上传的图片大小不能超过2MB!')
        return false
      }

      // 5.3 通过校验
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
  .disabled {
    // 深度穿透选择器
    ::v-deep {
      .el-upload--picture-card{
        display: none;
      }
    }
  }
</style>
